<template>
  <el-container class="model_index">
    <el-main class="model-tree" style="padding-bottom:10;padding-top:10">
      <el-card shadow="never" class="model-tree-left">
        <span style="font-size:14px;font-weight: 700;">组织架构</span>
        <el-tree
          ref="tree"
          class="treeitems"
          :data="departmentTreeList"
          :props="defaultProps"
          :default-expanded-keys="defaultList"
          :highlight-current="true"
          :check-on-click-node="true"
          :expand-on-click-node="false"
          default-expand-all
          node-key="id"
          style="margin-top: 10px;"
          :current-node-key="currentNodekey"
          @node-click="handleNodeClick"
        />
      </el-card>
      <div class="model-tree-right">
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar :refresh="{ query: getList1 }">
            <template v-slot:buttons>
              <el-button type="primary" icon="el-icon-plus" @click="openDialog('', 1, false)">新增</el-button>
            </template>
          </vxe-toolbar>
          <vxe-table
            ref="xTree"
            text-algin="center"
            border
            stripe
            resizable
            highlight-hover-row
            :loading="loading"
            :data="list"
            :auto-resize="true"
            :height="$store.getters.searchRow"
          >
            <vxe-table-column field="code" width="120" title="员工代码" />
            <vxe-table-column field="name" width="180" title="员工名称" />
            <vxe-table-column field="positionName" width="150" title="员工职务" />
            <vxe-table-column field="departmentName" width="150" title="所属部门" />
            <vxe-table-column field="mobile" width="160" title="联系手机" />
            <vxe-table-column field="genderDesc" width="80" title="性别" />
            <vxe-table-column field="email" width="250" title="个人邮箱" />
            <vxe-table-column field="remark" min-width="250" title="备注" />
            <vxe-table-column field="statusDesc" min-width="80" align="center" title="在职状态" />
            <vxe-table-column width="150" align="center" title="操作" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="openDialog(scope.row.id, 2, false)">编辑</el-button>
                <!-- el-button size="mini" type="text" @click="openDialog(scope.row.id, 2, true)">查看</el-button -->
                <el-button size="mini" type="text" @click="delEmployee(scope.row.id)">删除</el-button>
                <el-button size="mini" type="text" @click="changeState(scope.row.id, scope.row.status)">状态</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="params.pageNum"
            :page-size.sync="params.pageSize"
            :total="total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            @page-change="getList"
          />
        </el-card>
      </div>
    </el-main>
    <el-dialog v-if="dialogFormVisible" width="55%" :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="params" label-position="right" :rules="rules" label-width="5.5rem">
        <el-row class="mb16">
          <el-col :span="8">
            <el-form-item label="代码" prop="code">
              <el-input v-model="params.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职务" prop="positionId">
              <el-select v-model="params.positionId">
                <el-option v-for="item in orgPositionList " :key="item.name" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="params.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="英文名称" prop="nameEn">
              <el-input v-model="params.nameEn" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="昵称" prop="nick">
              <el-input v-model="params.nick" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="params.gender">
                <el-option :value="1" label="男" />
                <el-option :value="2" label="女" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系手机" prop="mobile">
              <el-input v-model="params.mobile" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他电话" prop="telephone">
              <el-input v-model="params.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号码" prop="idCardNo">
              <el-input v-model="params.idCardNo" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生年月" prop="birthday">
              <el-input v-model="params.birthday" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人邮箱" prop="email">
              <el-input v-model="params.email" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业邮箱" prop="bizMail">
              <el-input v-model="params.bizMail" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人微信号" prop="wechatCode">
              <el-input v-model="params.wechatCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人钉钉号" prop="dingtalkCode">
              <el-input v-model="params.dingtalkCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区" prop="dingtalkCode">
              <el-input v-model="params.dingtalkCode" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="家庭住址" prop="address">
              <el-input v-model="params.address" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb16">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="params.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="title !== '查看'" type="primary" @click="editOradd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogStatusVisible" width="30%" title="在职状态设置" :close-on-click-modal="true" :visible.sync="dialogStatusVisible">
      <el-form ref="StatusForm" :model="StatusParams" label-position="right" label-width="5.5rem">
        <el-row class="mb16">
          <el-col :span="24">
            <el-form-item label="在职状态" prop="status">
              <el-select v-model="StatusParams.status">
                <el-option v-for="item in employeeStatusList " :key="item.desc" :value="item.code + ''" :label="item.desc" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatusVisible = false">取 消</el-button>
        <el-button type="primary" @click="statusSave">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { employeeStatusList, getEffectDepartmentListTree, getEmployeePageList, addEmployee, modifyEmployee, viewEmployee, delEmployee, changeEmployeeStatus } from '@/api/org/organize'
import { queryPositionByDepartmentId } from '@/api/org/orgSetting'
export default {
  data() {
    return {
      orgPositionList: [],
      dialogFormVisible: false,
      dialogStatusVisible: false,
      title: '',
      StatusParams: {
        id: '',
        status: 1
      },
      params: {
        code: '',
        name: '',
        departmentId: '',
        positionId: '',
        mobile: '',
        gender: 1,
        remark: ''
      },
      rules: {
        code: [{ required: true, message: '请输入职务代码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入职务名称', trigger: 'blur' }],
        positionId: [{ required: true, message: '请输入职务级别', trigger: 'blur' }]
      },
      queryParams: {
        departmentId: 0,
        pageNum: 1,
        pageSize: 20
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      currentNodekey: '',
      defaultList: [{
        id: 1
      }],
      departmentTreeList: [],
      loading: false,
      total: 0,
      list: [],
      employeeStatusList: [],
      type: 1, // 1 添加 2修改
      operationType: 0 // 0 添加 1 注册
    }
  },
  created() {
    this.getDepartmentListTree()
    this.getEmployeeStatusSelect()
  },
  methods: {
    getDepartmentListTree() {
      getEffectDepartmentListTree({}).then((response) => {
        this.currentNodekey = response[0].id
        this.departmentTreeList = [...response]
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodekey)
          this.handleNodeClick({ id: this.currentNodekey })
        })
      })
    },
    handleNodeClick(data) {
      // if (!data.children) {
      this.currentNodekey = data.id
      this.queryParams.departmentId = data.id
      this.getList()
      this.getPositionSelect()
      // }
    },
    // 获取行业列表
    getPositionSelect() {
      queryPositionByDepartmentId({ departmentId: this.queryParams.departmentId }).then(res => {
        this.orgPositionList = res
      })
    },
    // 获取行业列表
    getEmployeeStatusSelect() {
      employeeStatusList().then(res => {
        this.employeeStatusList = res
      })
    },
    getList1() {
      this.getList()
    },
    // 重置参数
    refreshParams(queryP) {
      this.queryParams = queryP
      this.getList()
    },
    // 删除
    delEmployee(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delEmployee({ id }).then(res => {
          this.$message.success('删除成功!')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 打开弹窗
    openDialog(id, type, bool) {
      this.disabled = bool
      this.operationType = type
      if (type === 2) {
        this.title = type === 2 ? '查看' : '编辑'
        viewEmployee({ id }).then(response => {
          this.params = response
          this.dialogFormVisible = true
        })
      } else {
        this.title = '新增'
        this.params = {}
        this.params.gender = 1
        this.params.departmentId = this.queryParams.departmentId
        this.dialogFormVisible = true
      }
    },
    // 编辑或新增
    editOradd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.operationType === 1) {
            addEmployee(this.params).then(res => {
              this.$message.success('新增成功')
              this.dialogFormVisible = false
              this.getList()
            })
          } else {
            modifyEmployee(this.params).then(res => {
              this.$message.success('编辑成功')
              this.dialogFormVisible = false
              this.getList()
            })
          }
        }
      })
    },
    getList() {
      getEmployeePageList(this.queryParams).then(res => {
        this.total = res.total
        this.list = res.records
      })
    },
    changeState(id, status) {
      this.StatusParams = {}
      this.StatusParams.id = id
      this.StatusParams.status = status
      this.dialogStatusVisible = true
    },
    // 编辑或新增
    statusSave() {
      changeEmployeeStatus({
        id: this.StatusParams.id,
        status: this.StatusParams.status
      }).then(response => {
        this.$message.success('职位状态设置成功')
        this.dialogStatusVisible = false
        this.getList()
      })
    }
  }
}
</script>

<style>
.model_index {
  .model-tree {
    display: flex;
    .model-tree-left {
      margin-right: 20px;
      min-width: 250px;
      height: 640px;
      overflow-y: auto;
      .el-tree-node.is-current > .el-tree-node__content {
        background-color: #2F8DFB !important;
        color: white;
      }
    }
    .model-tree-right {
      width: calc(100% - 280px);
    }
  }
}
</style>
